import React from 'react';
import cx from 'classnames';
import s from './index.m.less';

export default class LoadingIcon extends React.PureComponent {
    static defaultProps = {
        width: '0.64rem',
        height: '0.64rem',
        theme: 'red', // white || red
        className: '',
    };

    componentDidMount() {
        this.setInterval();
    }

    componentWillUnmount() {
        window.clearInterval(this.interval);
    }

    setInterval = () => {
        let i = 0;
        this.interval = window.setInterval(() => {
            i += 1;
            $(this.$icon)
                .removeClass(s[`img${(i - 1) % 8}`])
                .addClass(s[`img${i % 8}`]);
        }, 100);
    };

    render() {
        const { width, height, theme, className } = this.props;
        return (
            <div
                className={cx(s.loadingIcon, s[theme], className, 'img0')}
                style={{
                    width,
                    height,
                }}
                ref={a => {
                    this.$icon = a;
                }}
            />
        );
    }
}
